// 获取导航栏对象
let nav = document.querySelector('.nav nav');
// 获取线条对象
let line = document.querySelector('.nav .line');
// 获取所有导航项
let navs = document.querySelectorAll('.nav a');

// 给所有的导航项添加编号
for(let i = 0; i < navs.length; i++){
    navs[i].dataset.id = i;
}

// 点击切换选中项
nav.addEventListener('click', function(e){
    // 互斥原则
    document.querySelector('.nav .selected').classList.remove('selected'); 
    e.target.classList.add('selected');   
})

// 滑块移动效果1：鼠标划过导航项时线条移到对应位置
nav.addEventListener('mouseover', function(e){
    // 计算当前鼠标在第几个滑块
    let curr = e.target.dataset.id;
    // 线条需要滑动的距离
    line.style.left =  15 +  100 * curr + 'px';
})

// 滑块移动效果2：离开导航项时线条回到已选中位置
nav.addEventListener('mouseleave', function(){
    // 获取选中导航项
    let selNav = document.querySelector('.selected');
    // 移会到选中的导航项
    line.style.left = 15 + 100 * selNav.dataset.id + 'px';
})
